<template>
	<view class="p30">
		<view class="mtb20">
			<u-steps current="0" activeColor="#06B7F3" inactiveColor="#C9D3E9">
				<u-steps-item title="信息输入">
				</u-steps-item>
				<u-steps-item title="车辆验证"></u-steps-item>
				<u-steps-item title="注册成功"></u-steps-item>
			</u-steps>
		</view>
		<view class="card-shadow-box p30 mt50">
			<u--form labelPosition="left" :model="model" ref="form1">
				<u-form-item  border prop="vin">
					<u-input placeholder="请输入车架号码" v-model="model.vin" inputAlign="right">
						<template v-slot:prefix>
							<text class="f24 c-desc">车架号码</text>
						</template>
							<u-icon slot="suffix" name="search" color="#FEBB41" size="28" @click="debounceInputVin"></u-icon>
					</u-input>
				</u-form-item>

				<u-form-item  border prop="engineNum">
					<u-input placeholder="请输入发动机号" v-model="model.engineNum" inputAlign="right" :disabled="true">
						<template v-slot:prefix>
							<text class="f24 c-desc">发动机号</text>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item  border prop="nickName">
					<u-input placeholder="请输入车辆昵称" v-model="model.nickName" inputAlign="right">
						<template v-slot:prefix>
							<text class="f24 c-desc">车辆昵称</text>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item  border prop="licensePlateNumber">
					<u-input placeholder="请输入车牌号码" v-model="model.licensePlateNumber" inputAlign="right">
						<template v-slot:prefix>
							<text class="f24 c-desc">车牌号码</text>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
			<view class="u-border border-raduis8" style="margin:8px 0;">
				<view class="flex-between p20">
					<view>
						<view class="flex-column">
							<text class="c-info">车辆型号</text>
							<text class="bold mt10">{{car.carTypeName}}</text>
						</view>
						<view class="mt30">
							<text class="c-info">车辆颜色</text>
							<view class="flex-align-center mt10">
								<view style="position: relative;top: 1px;">
								</view><text class="bold">{{car.colorName}}</text>
							</view>
						</view>
					</view>
					<view>
						<image :src="car.carPhotoLink" style="width: 140px;height: 140px"></image>
					</view>
				</view>
			</view>

		</view>
		<view class="flex-center">
			<view style="width: 150px;" class="mt100">
				<u-button type="primary" text="下一步" :throttleTime="1000" @click="nextStep"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchByVinAPI
	} from "@/api/api/car.js";
	import {
		throttle
	} from '@/utils/utils.js'

	export default {
		data() {
			return {
				model: {
					vin: '',
					nickName: '',//回显
					licensePlateNumber: '',
					engineNum: '',//回显
				},
				car: {},

			}
		},
		onShow() {
			this.$store.commit("setSpecialAppOnShow",false); 
		},
		methods: {
			debounceInputVin:throttle(function(){
				console.log("车架号",this.model.vin)
				if(this.$validatenull(this.model.vin)){
					this.$showToast("请先输入车架号查询车辆");
					return;
				}else{
					if(this.model.vin != ""){
						searchByVinAPI({
							vin: this.model.vin
						}).then(([err, data]) => {
							if (err) return;
							this.car = data;
							this.model.engineNum = data.engineNum;
							this.model.nickName = data.nickName;
							
						})
					}
				}
			}),
			
			nextStep() {
				if(this.$validatenull(this.car)){
					this.$showToast("请先根据车架号查询车辆");
					return;
				}
				let vin = this.model.vin;
				if(this.car.vin != vin.toUpperCase() && this.car.vin != vin.toLowerCase()){
					this.$showToast("当前输入的车架号与查询出来车辆车架号不一致，请重新查询");
					return;
				}
				if(this.$validatenull(this.model.engineNum)){
					this.$showToast("请输入发动机号");
					return;
				}
				if(this.$validatenull(this.model.nickName)){
					this.$showToast("请输入昵称");
					return;
				}
				
				let licensePlateNumber = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[A-Z]{1}[A-Z0-9]{5,6}$/;
				
				if(!this.$validatenull(this.model.licensePlateNumber) && !licensePlateNumber.test(this.model.licensePlateNumber)){
					this.$showToast("请输入正确的车牌号");
					return;
				}
				
				this.car.nickName  = this.model.nickName; //不然去currentNickName 的时候会报错
				this.$store.commit("setLastBike",{
					id:this.car.id,
					ecuId:this.car.ecuId
				});//当前需要绑定的车辆，主要用于上一次的取消连接
				
				this.$navigateTo(`/pagesMy/views/deviceVerify?nickName=${this.model.nickName}&licensePlateNumber=${this.model.licensePlateNumber}&id=${this.car.id}&engineNum=${this.model.engineNum}`);
			},
		}
	}
</script>

<style>
</style>
